<template>
	<div class="map-container">
		<div id="map" class="map"></div>
	</div>
</template>

<script>
let landmark_png = require('@/assets/icons/landmark.png')
let alarm_landmark_png = require('@/assets/icons/alarm_landmark.png')

export default {
	components: {},
	props: {
		data: {
			type: Array,
		},
	},
	data() {
		return {
			mapData: '',
			markerClusterer: {},
			hostList: [],
			map: {},
		}
	},
	created() {},
	mounted() {
		this.initBMap()
		// console.log(this.mapData)
	},
	computed: {
		// 聚合点集合
		_clusters() {
			return this.markerClusterer._clusters
		},
	},
	methods: {
		// 控制聚合点的标签样式
		setLabelStyle(contents) {
			let divBox = ''
			contents.forEach((content) => {
				let innerDiv = `<div class="content"><span>${content}</span></div>`
				divBox += innerDiv
			})
			//用于设置样式
			divBox = '<div class="content-box">' + divBox + '</div>'
			return divBox
		},

		// 创建地图
		initBMap: function() {
			this.map = new BMap.Map('map')
			this.map.setMapStyle({ style: 'light' })
			// this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12)
			this.map.enableScrollWheelZoom(true)
		},

		// 设置地图数据
		setMapData() {
			let data = this.data
			this.initBMap()
			let points = [] // 用来计算中心点
			let icon = new BMap.Icon(landmark_png, new BMap.Size(44, 44))
			let markers = []
			if (data.length > 0) {
				data.forEach((host) => {
					let lng = host.longitude
					let lat = host.latitude
					let point = { lng: lng, lat: lat }
					points.push(point)
					let pt = new BMap.Point(lng, lat)
					let marker = new BMap.Marker(pt, { icon: icon })
					markers.push(marker)
				})
				let view = this.map.getViewport(points)
				this.map.centerAndZoom(
					// 设置中心点
					new BMap.Point(view.center.lng, view.center.lat),
					view.zoom
				)
				this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {
					markers: markers,
				})
				console.log(	this.markerClusterer)
				this.markerClusterer._gridSize = 200
			} else {
				// 如果没有主机的经纬度信息，显示当前的城市
				console.log('没有主机')
				let myMap = this.map
				let myFun = function(result) {
					let point = new BMap.Point(result.center.lng, result.center.lat)
					myMap.centerAndZoom(point, 14)
				}
				let myCity = new BMap.LocalCity()
				// console.log(myCity)
				myCity.get(myFun)
			}
		},
	},
	watch: {
		_clusters(data) {
			this.map.clearOverlays()
			let icon = new BMap.Icon(landmark_png, new BMap.Size(44, 44))
			let alarm_icon = new BMap.Icon(alarm_landmark_png, new BMap.Size(44, 44))
			let hostList = this.data
			console.log(this.data,123)
			this.markerClusterer._gridSize = 200
			data.forEach((item) => {
				let _center = item._center
				let point = new BMap.Point(_center.lng, _center.lat)
				let _markers = item._markers
				let points = []
				if (item._isReal) {
					//是聚合点
					let names = []
					_markers.forEach((marker) => {
						let lng = marker.point.lng
						let lat = marker.point.lat
						let point = { lng: lng, lat: lat }
						points.push(point)
				
						hostList.forEach((host) => {
							
							if (host.longitude == lng && host.latitude == lat) {
								names.push(host.name)
							
							}
						})
					})
					let marker = new BMap.Marker(point, { icon: icon })
					let myLabel = new BMap.Label(this.setLabelStyle(names), {
						offset: new BMap.Size(-80, 50),
					})
					// myLabel.addEventListener('mouseover', (event) => {
					// 	marker.setIcon(alarm_icon)
					// })
					// myLabel.addEventListener('mouseout', (event) => {
					// 	marker.setIcon(icon)
					// })
					myLabel.addEventListener('click', (event) => {
						this.map.centerAndZoom(
							// 设置中心点
							new BMap.Point(view.center.lng, view.center.lat),
							view.zoom
						)
					})
					marker.setLabel(myLabel)
					let view = this.map.getViewport(points)
					marker.addEventListener('click', (event) => {
						this.map.centerAndZoom(
							// 设置中心点
							new BMap.Point(view.center.lng, view.center.lat),
							view.zoom
						)
					})

					// marker.addEventListener('mouseout', (event) => {
					// 	marker.setIcon(icon)
					// })
					this.map.addOverlay(marker)
				} else {
					let lng = _markers[0].point.lng
					let lat = _markers[0].point.lat
					let point = new BMap.Point(lng, lat)
					let marker = new BMap.Marker(point, { icon: icon })
					let name = ''
					hostList.forEach((host) => {
						if (host.longitude == lng && host.latitude == lat) {
							name = host.name
						}
					})
					let myLabel = new BMap.Label(name, {
						offset: new BMap.Size(-35, 50),
					})
					let labelStyleObj = {}
					labelStyleObj.fontSize = '14px'
					labelStyleObj.width = '100px'
					labelStyleObj.lineHeight = '20px'
					labelStyleObj.whiteSpace = 'unset'
					labelStyleObj.border = '1px solid red!important;'
					labelStyleObj.background = '#fff'
					labelStyleObj.color = '#ff5b0c'
					labelStyleObj.padding = '2px 8px'
					labelStyleObj['text-align'] = 'center'
					myLabel.setStyle(labelStyleObj)
					myLabel.addEventListener('mouseover', function() {
						this.setStyle({
							color: '#44c7f4',
						})
					})
					myLabel.addEventListener('mouseout', function() {
						this.setStyle({
							color: '#ff5b0c',
						})
					})
					marker.setLabel(myLabel)
					this.map.addOverlay(marker)
				}
			})
		},
	},
}
</script>

<style lang="stylus" scoped>
.map-container
	position relative
	width 100%
	height 100%
	.map
		position relative
		width 100%
		height 100%
>>>.content-box {
	width: 2rem
	display: flex;
    background-color: #fff;
    flex-direction: column;
    align-items: center;
	cursor: pointer!important;
	font-size: 14px!important;
}
>>>.content {
	margin: 2px 8px;
	color: #ff5b0c;
}
>>>.content:hover {
	width: 100%;
	background-color: #1e90ff
	text-align: center;
	opacity: 0.8
}

>>>.BMapLabel
	border 1px solid #ff5b0c!important
</style>
